<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录/注册 - 壹加壹农业服务平台</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <!-- Tailwind CSS -->
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        'primary-light': '#34d399',
                        secondary: '#06b6d4',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        success: '#10b981',
                        neutral: '#f9fafb',
                        'neutral-dark': '#f3f4f6',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../css/all.min.css">
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="../css/common.css">
    
    <style>
        /* 动态背景 */
        .dynamic-bg {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 100vh;
            background: linear-gradient(135deg, #ffffff 0%, #f9fafb 25%, #ffffff 50%, #f0fdf4 75%, #ffffff 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            overflow: hidden;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* 漂浮圆圈 */
        .floating-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(220, 252, 231, 0.4);
            backdrop-filter: blur(15px);
            animation: float 20s infinite ease-in-out;
        }
        
        .circle-1 {
            width: 200px;
            height: 200px;
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }
        
        .circle-2 {
            width: 180px;
            height: 180px;
            top: 50%;
            right: 8%;
            animation-delay: -5s;
        }
        
        .circle-3 {
            width: 150px;
            height: 150px;
            bottom: 15%;
            left: 15%;
            animation-delay: -10s;
        }
        
        .circle-4 {
            width: 220px;
            height: 220px;
            top: 25%;
            right: 18%;
            animation-delay: -15s;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translate(0, 0) rotate(0deg);
            }
            33% {
                transform: translate(30px, -30px) rotate(120deg);
            }
            66% {
                transform: translate(-20px, 20px) rotate(240deg);
            }
        }
        
        /* 波浪效果 */
        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%2310b981' fill-opacity='0.1'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' fill='%2310b981' fill-opacity='0.05'/%3E%3C/svg%3E");
            background-size: 1200px 100px;
            background-repeat: repeat-x;
            animation: wave 15s linear infinite;
        }
        
        @keyframes wave {
            0% { background-position-x: 0; }
            100% { background-position-x: 1200px; }
        }
        
        /* 光晕效果 */
        .glow-effect {
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
            filter: blur(40px);
            animation: glow 8s ease-in-out infinite;
        }
        
        .glow-1 {
            top: -200px;
            right: -200px;
            animation-delay: 0s;
        }
        
        .glow-2 {
            bottom: -200px;
            left: -200px;
            animation-delay: -4s;
        }
        
        @keyframes glow {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.2); }
        }
        
        /* 标签激活状态 */
        .tab-active {
            color: #10b981;
            border-bottom: 3px solid #10b981;
            font-weight: 600;
        }
        
        /* 输入框焦点 */
        .input-focus:focus {
            border-color: #10b981;
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
            transform: translateY(-1px);
        }
        
        /* 玻璃态效果 */
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        /* 按钮悬停效果 */
        .btn-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
        }
        
        .btn-hover:active {
            transform: translateY(0);
        }
        
        /* 登录方式按钮 */
        .social-btn {
            position: relative;
            overflow: hidden;
        }
        
        .social-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(16, 185, 129, 0.1);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .social-btn:hover::before {
            width: 300px;
            height: 300px;
        }
        
        /* Logo脉动效果 */
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
            }
        }
        
        .logo-pulse {
            animation: pulse 2s ease-in-out infinite;
        }
        
        /* 卡片进入动画 */
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-slide-up {
            animation: slideUp 0.6s ease-out forwards;
        }
        
        /* 输入框图标动画 */
        .input-icon {
            transition: all 0.3s ease;
        }
        
        .input-focus:focus ~ .input-icon {
            color: #10b981;
            transform: scale(1.1);
        }
        
        /* 验证码按钮渐变 */
        .code-btn {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            position: relative;
            overflow: hidden;
        }
        
        .code-btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }
        
        .code-btn:hover::after {
            left: 100%;
        }
        
        /* 图片验证码样式 */
        .captcha-img {
            cursor: pointer;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            transition: all 0.3s;
            user-select: none;
        }
        
        .captcha-img:hover {
            border-color: #10b981;
            transform: scale(1.02);
        }
        
        .captcha-img:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body class="bg-neutral">
    <!-- 动态背景 -->
    <div class="dynamic-bg">
        <!-- 漂浮圆圈 -->
        <div class="floating-circle circle-1"></div>
        <div class="floating-circle circle-2"></div>
        <div class="floating-circle circle-3"></div>
        <div class="floating-circle circle-4"></div>
        
        <!-- 光晕效果 -->
        <div class="glow-effect glow-1"></div>
        <div class="glow-effect glow-2"></div>
        
        <!-- 波浪效果 -->
        <div class="wave"></div>
    </div>
    
    <div class="container-app relative z-10" style="background: transparent; overflow-y: auto; overflow-x: hidden;">
        <!-- 返回首页按钮 -->
        <div class="absolute top-4 left-4 z-20">
            <button onclick="window.location.href='../index.html'" 
                    class="w-10 h-10 rounded-xl bg-white/80 backdrop-blur-md shadow-lg hover:bg-white hover:shadow-xl transition-all duration-300 flex items-center justify-center group border border-gray-100/50">
                <i class="fa fa-arrow-left text-text-primary group-hover:text-primary transition-colors"></i>
            </button>
        </div>
        
        <!-- 顶部装饰区域 -->
        <div class="relative overflow-hidden px-6 pt-8 pb-4">
            <!-- Logo和标题 -->
            <div class="flex flex-col items-center">
                <div class="w-24 h-24 rounded-3xl gradient-primary backdrop-blur-md flex items-center justify-center mb-4 shadow-2xl logo-pulse border-2 border-primary/30">
                    <i class="fa fa-leaf text-white text-5xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-primary mb-2 drop-shadow-sm">壹加壹农业</h1>
                <p class="text-text-secondary text-sm">智慧农业 · 美好生活</p>
                <div class="mt-4 flex items-center gap-2">
                    <div class="w-2 h-2 rounded-full bg-primary/60 animate-pulse"></div>
                    <div class="w-2 h-2 rounded-full bg-primary/60 animate-pulse" style="animation-delay: 0.2s;"></div>
                    <div class="w-2 h-2 rounded-full bg-primary/60 animate-pulse" style="animation-delay: 0.4s;"></div>
                </div>
            </div>
        </div>
        
        <!-- 登录/注册表单区域 -->
        <div class="relative px-6 pb-8">
            <div class="glass-card rounded-3xl shadow-2xl p-5 animate-slide-up">
                <!-- 登录/注册切换 -->
                <div class="flex mb-4 border-b border-gray-100">
                    <button id="tab-login" class="flex-1 py-3 text-center font-medium transition-all tab-active" onclick="switchTab('login')">
                        登录
                    </button>
                    <button id="tab-register" class="flex-1 py-3 text-center font-medium text-text-secondary transition-all" onclick="switchTab('register')">
                        注册
                    </button>
                </div>
                
                <!-- 登录表单 -->
                <form id="login-form" class="space-y-3">
                    <!-- 账号输入 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-1.5">
                            <i class="fa fa-user mr-1 text-primary"></i>账号
                        </label>
                        <div class="relative">
                            <input type="text" id="login-account" 
                                class="w-full px-4 py-2.5 pl-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                placeholder="请输入账号/手机号"
                                required>
                            <i class="fa fa-user absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                        </div>
                    </div>
                    
                    <!-- 密码输入 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-1.5">
                            <i class="fa fa-lock mr-1 text-primary"></i>密码
                        </label>
                        <div class="relative">
                            <input type="password" id="login-password" 
                                class="w-full px-4 py-2.5 pl-10 pr-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                placeholder="请输入密码"
                                minlength="6"
                                required>
                            <i class="fa fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                            <button type="button" 
                                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-text-secondary hover:text-primary transition-colors"
                                onclick="togglePasswordVisibility('login')">
                                <i id="login-password-eye" class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 图片验证码 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-1.5">
                            <i class="fa fa-shield mr-1 text-primary"></i>验证码
                        </label>
                        <div class="flex gap-2">
                            <div class="relative flex-1">
                                <input type="text" id="login-captcha" 
                                    class="w-full px-4 py-2.5 pl-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                    placeholder="请输入验证码"
                                    maxlength="4"
                                    required>
                                <i class="fa fa-shield absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                            </div>
                            <canvas id="login-captcha-canvas" 
                                class="captcha-img bg-white" 
                                width="110" 
                                height="42"
                                onclick="refreshCaptcha('login')"
                                title="点击刷新验证码">
                            </canvas>
                        </div>
                    </div>
                    
                    <!-- 记住密码和找回密码 -->
                    <div class="flex items-center justify-between">
                        <label class="flex items-center gap-2 text-sm text-text-secondary">
                            <input type="checkbox" id="remember-login" checked>
                            记住密码
                        </label>
                        <button type="button" class="text-sm text-primary hover:underline" onclick="showForgotPassword()">
                            忘记密码？
                        </button>
                    </div>
                    
                    <!-- 协议同意 -->
                    <div class="flex items-start gap-2">
                        <input type="checkbox" id="agree-login" required checked>
                        <label for="agree-login" class="text-xs text-text-secondary">
                            我已阅读并同意
                            <a href="javascript:void(0)" class="text-primary hover:underline">《用户协议》</a>
                            和
                            <a href="javascript:void(0)" class="text-primary hover:underline">《隐私政策》</a>
                        </label>
                    </div>
                    
                    <!-- 登录按钮 -->
                    <button type="submit" class="w-full py-3 gradient-primary text-white rounded-xl font-medium shadow-medium btn-hover transition-all relative overflow-hidden">
                        <span class="relative z-10 flex items-center justify-center gap-2">
                            <i class="fa fa-sign-in"></i>
                        登录
                        </span>
                    </button>
                </form>
                
                <!-- 注册表单（默认隐藏） -->
                <form id="register-form" class="space-y-3 hidden">
                    <!-- 手机号输入 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-1.5">
                            <i class="fa fa-mobile mr-1 text-primary"></i>手机号
                        </label>
                        <div class="relative">
                            <input type="tel" id="register-phone" 
                                class="w-full px-4 py-2.5 pl-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                placeholder="请输入手机号"
                                maxlength="11"
                                pattern="^1[3-9]\d{9}$"
                                required>
                            <i class="fa fa-mobile absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                        </div>
                    </div>
                    
                    <!-- 密码输入 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-1.5">
                            <i class="fa fa-lock mr-1 text-primary"></i>密码
                        </label>
                        <div class="relative">
                            <input type="password" id="register-password" 
                                class="w-full px-4 py-2.5 pl-10 pr-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                placeholder="请输入密码(6-20位)"
                                minlength="6"
                                maxlength="20"
                                required>
                            <i class="fa fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                            <button type="button" 
                                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-text-secondary hover:text-primary transition-colors"
                                onclick="togglePasswordVisibility('register')">
                                <i id="register-password-eye" class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 确认密码 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-1.5">
                            <i class="fa fa-lock mr-1 text-primary"></i>确认密码
                        </label>
                        <div class="relative">
                            <input type="password" id="register-confirm-password" 
                                class="w-full px-4 py-2.5 pl-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                placeholder="请再次输入密码"
                                minlength="6"
                                maxlength="20"
                                required>
                            <i class="fa fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                        </div>
                    </div>
                    
                    <!-- 短信验证码 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-1.5">
                            <i class="fa fa-mobile mr-1 text-primary"></i>短信验证码
                        </label>
                        <div class="flex gap-2">
                            <div class="relative flex-1">
                                <input type="text" id="register-sms-code" 
                                    class="w-full px-4 py-2.5 pl-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                    placeholder="请输入短信验证码"
                                    maxlength="6"
                                    required>
                                <i class="fa fa-mobile absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                            </div>
                            <button type="button" id="register-sms-btn" 
                                class="px-4 py-2.5 bg-primary text-white rounded-xl text-sm font-medium hover:bg-primary-dark transition-colors code-btn"
                                onclick="sendRegisterSmsCode()">
                                获取验证码
                            </button>
                        </div>
                    </div>
                    
                    <!-- 协议同意 -->
                    <div class="flex items-start gap-2 pt-1">
                        <input type="checkbox" id="agree-register" required checked>
                        <label for="agree-register" class="text-xs text-text-secondary">
                            我已阅读并同意
                            <a href="javascript:void(0)" class="text-primary hover:underline">《用户协议》</a>
                            和
                            <a href="javascript:void(0)" class="text-primary hover:underline">《隐私政策》</a>
                        </label>
                    </div>
                    
                    <!-- 注册按钮 -->
                    <button type="submit" class="w-full py-3.5 gradient-primary text-white rounded-xl font-medium shadow-medium btn-hover transition-all relative overflow-hidden">
                        <span class="relative z-10 flex items-center justify-center gap-2">
                            <i class="fa fa-user-plus"></i>
                            注册
                        </span>
                    </button>
                </form>
            </div>
            
        </div>
        
        <!-- 忘记密码弹框 -->
        <div id="forgot-password-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 hidden items-center justify-center p-6" style="display: none;">
            <div class="bg-white rounded-3xl w-full max-w-md shadow-xl">
                <div class="px-6 py-4 border-b border-gray-100">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-bold text-text-primary">忘记密码</h3>
                        <button onclick="closeForgotPassword()" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors">
                            <i class="fa fa-times text-gray-600"></i>
                        </button>
                    </div>
                </div>
                
                <form id="forgot-password-form" class="p-6 space-y-4">
                    <!-- 手机号 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-2">
                            <i class="fa fa-mobile mr-1 text-primary"></i>手机号
                        </label>
                        <div class="relative">
                            <input type="tel" id="forgot-phone" 
                                class="w-full px-4 py-3 pl-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                placeholder="请输入手机号"
                                maxlength="11"
                                required>
                            <i class="fa fa-mobile absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                        </div>
                    </div>
                    
                    <!-- 验证码 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-2">
                            <i class="fa fa-shield mr-1 text-primary"></i>验证码
                        </label>
                        <div class="flex gap-2">
                            <div class="relative flex-1">
                                <input type="text" id="forgot-code" 
                                    class="w-full px-4 py-3 pl-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                    placeholder="请输入验证码"
                                    maxlength="6"
                                    required>
                                <i class="fa fa-shield absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                            </div>
                            <button type="button" id="forgot-code-btn" 
                                class="px-6 py-3 code-btn text-white rounded-xl text-sm font-medium transition-all whitespace-nowrap shadow-md"
                                onclick="sendForgotCode()">
                                获取验证码
                            </button>
                        </div>
                    </div>
                    
                    <!-- 新密码 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-2">
                            <i class="fa fa-lock mr-1 text-primary"></i>新密码
                        </label>
                        <div class="relative">
                            <input type="password" id="new-password" 
                                class="w-full px-4 py-3 pl-10 pr-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                placeholder="请输入新密码（6-20位）"
                                minlength="6"
                                maxlength="20"
                                required>
                            <i class="fa fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                            <button type="button" 
                                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-text-secondary hover:text-primary transition-colors"
                                onclick="toggleNewPasswordVisibility()">
                                <i id="new-password-eye" class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 确认密码 -->
                    <div>
                        <label class="block text-sm font-medium text-text-primary mb-2">
                            <i class="fa fa-lock mr-1 text-primary"></i>确认密码
                        </label>
                        <div class="relative">
                            <input type="password" id="confirm-password" 
                                class="w-full px-4 py-3 pl-10 bg-neutral border border-gray-200 rounded-xl text-sm focus:outline-none input-focus transition-all" 
                                placeholder="请再次输入新密码"
                                minlength="6"
                                maxlength="20"
                                required>
                            <i class="fa fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
                        </div>
                    </div>
                    
                    <!-- 提交按钮 -->
                    <div class="flex gap-3 pt-2">
                        <button type="button" 
                            onclick="closeForgotPassword()" 
                            class="flex-1 px-6 py-3 bg-gray-100 text-text-primary rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors">
                            取消
                        </button>
                        <button type="submit" 
                            class="flex-1 px-6 py-3 gradient-primary text-white rounded-xl text-sm font-medium hover:opacity-90 transition-opacity">
                            确认修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script src="../js/common.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        // 验证码存储
        let captchaStore = {
            login: { uuid: '', img: '' },
            register: { uuid: '', img: '' }
        };
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化token
            CommonUtils.initToken();
            loadSavedCredentials();
            loadCaptcha('login');
            // 注册页面使用短信验证码，不需要加载图片验证码
            
            // 开发调试：测试短信验证码接口
            testSmsApiConnection();
            
            // 开发调试：测试所有API接口
            testAllApiConnections();
        });
        
        // 测试短信验证码API连接（仅用于开发调试）
        async function testSmsApiConnection() {
            try {
                console.log('=== 短信验证码API调试信息 ===');
                console.log('API基础地址:', GLOBAL_CONFIG.API_BASE_URL);
                console.log('客户端ID:', GLOBAL_CONFIG.CLIENT_ID);
                console.log('完整API地址:', GLOBAL_CONFIG.API_BASE_URL + '/resource/sms/code');
                
                // 测试API请求参数格式
                const testParams = {
                    phone: '13800138000'
                };
                console.log('API请求参数示例:', testParams);
                console.log('JSON字符串:', JSON.stringify(testParams));
                
                console.log('=== 短信验证码API调试信息结束 ===');
            } catch (error) {
                console.error('短信验证码API连接测试失败:', error);
            }
        }
        
        // 测试所有API接口连接（仅用于开发调试）
        async function testAllApiConnections() {
            console.log('=== 开始测试所有API接口 ===');
            
            try {
                // 测试获取图片验证码接口
                console.log('1. 测试获取图片验证码接口...');
                const captchaResult = await CommonUtils.getCaptchaAPI();
                console.log('✅ 图片验证码接口正常:', captchaResult);
                
                // 测试短信验证码接口（不实际发送）
                console.log('2. 测试短信验证码接口参数格式...');
                const smsParams = {
                    phone: '13800138000'
                };
                console.log('✅ 短信验证码参数格式正确:', smsParams);
                
                // 测试注册接口参数格式
                console.log('3. 测试注册接口参数格式...');
                const registerParams = {
                    username: '13800138000',
                    password: '123456',
                    code: '123456',
                    uuid: '',
                    clientId: GLOBAL_CONFIG.CLIENT_ID,
                    grantType: 'password',
                    userType: 'app_user',
                    tenantId: '000000'
                };
                console.log('✅ 注册接口参数格式正确:', registerParams);
                
                // 测试登录接口参数格式
                console.log('4. 测试登录接口参数格式...');
                const loginParams = {
                    username: 'admin',
                    password: 'admin123',
                    code: '1234',
                    uuid: 'test-uuid',
                    clientId: GLOBAL_CONFIG.CLIENT_ID,
                    grantType: 'password',
                    tenantId: '000000'
                };
                console.log('✅ 登录接口参数格式正确:', loginParams);
                
                console.log('=== 所有API接口测试完成 ===');
                console.log('✅ 所有接口参数格式正确，可以正常使用');
                
            } catch (error) {
                console.error('❌ API接口测试失败:', error);
                console.error('错误详情:', {
                    message: error.message,
                    stack: error.stack
                });
            }
        }
        
        // 加载保存的登录信息
        function loadSavedCredentials() {
            const savedAccount = localStorage.getItem('savedAccount');
            const savedPassword = localStorage.getItem('savedPassword');
            
            if (savedAccount) {
                document.getElementById('login-account').value = savedAccount;
            }
            
            if (savedPassword) {
                document.getElementById('login-password').value = savedPassword;
                document.getElementById('remember-login').checked = true;
            }
        }
        
        // 从后端加载验证码
        async function loadCaptcha(type) {
            try {
                const result = await CommonUtils.getCaptchaAPI();
                if (result.data && result.data.img) {
                    captchaStore[type] = {
                        uuid: result.data.uuid,
                        img: result.data.img
                    };
                    
                    // 显示验证码图片
                    const canvas = document.getElementById(type + '-captcha-canvas');
                    const ctx = canvas.getContext('2d');
                    const img = new Image();
                    
                    img.onload = function() {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    };
                    
                    img.src = 'data:image/png;base64,' + result.data.img;
                } else {
                    // 如果后端验证码不可用，使用本地生成的验证码
                    // generateLocalCaptcha(type);
                }
            } catch (error) {
                throw CommonUtils.showToast('访问过于频繁，请稍候再试', 'error');
                console.warn('访问过于频繁，请稍候再试:', error);
                // generateLocalCaptcha(type);
            }
        }
        
        // 生成本地验证码（备用方案）
        function generateLocalCaptcha(type) {
            const canvas = document.getElementById(type + '-captcha-canvas');
            const ctx = canvas.getContext('2d');
            const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
            let captcha = '';
            
            // 生成4位验证码
            for (let i = 0; i < 4; i++) {
                captcha += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            
            // 保存验证码
            captchaStore[type] = {
                uuid: CommonUtils.generateUUID(),
                img: '',
                localCode: captcha
            };
            
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制背景
            ctx.fillStyle = '#f0fdf4';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制干扰线
            for (let i = 0; i < 3; i++) {
                ctx.strokeStyle = `rgba(16, 185, 129, ${Math.random() * 0.3 + 0.1})`;
                ctx.beginPath();
                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.stroke();
            }
            
            // 绘制干扰点
            for (let i = 0; i < 30; i++) {
                ctx.fillStyle = `rgba(16, 185, 129, ${Math.random() * 0.5})`;
                ctx.beginPath();
                ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI);
                ctx.fill();
            }
            
            // 绘制验证码
            for (let i = 0; i < captcha.length; i++) {
                ctx.font = `bold ${20 + Math.random() * 6}px Arial`;
                ctx.fillStyle = `rgba(${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 100 + 100)}, ${Math.floor(Math.random() * 100)}, 0.8)`;
                ctx.save();
                ctx.translate(20 + i * 22, 28);
                ctx.rotate((Math.random() - 0.5) * 0.4);
                ctx.fillText(captcha[i], 0, 0);
                ctx.restore();
            }
        }
        
        // 刷新验证码
        function refreshCaptcha(type) {
            loadCaptcha(type);
        }
        
        // 验证码校验（本地验证码）
        function verifyLocalCaptcha(type, inputValue) {
            return captchaStore[type].localCode && captchaStore[type].localCode.toUpperCase() === inputValue.toUpperCase();
        }
        
        // 切换登录/注册标签
        function switchTab(type) {
            const loginTab = document.getElementById('tab-login');
            const registerTab = document.getElementById('tab-register');
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            
            if (type === 'login') {
                loginTab.classList.add('tab-active', 'text-primary');
                loginTab.classList.remove('text-text-secondary');
                registerTab.classList.remove('tab-active', 'text-primary');
                registerTab.classList.add('text-text-secondary');
                loginForm.classList.remove('hidden');
                registerForm.classList.add('hidden');
            } else {
                registerTab.classList.add('tab-active', 'text-primary');
                registerTab.classList.remove('text-text-secondary');
                loginTab.classList.remove('tab-active', 'text-primary');
                loginTab.classList.add('text-text-secondary');
                registerForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
                
                // 切换到注册页面时，重置短信验证码按钮状态
                const smsBtn = document.getElementById('register-sms-btn');
                if (smsBtn && registerCodeCountdown <= 0) {
                    smsBtn.textContent = '获取验证码';
                    smsBtn.disabled = false;
                    smsBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                }
            }
        }
        
        // 切换密码可见性
        function togglePasswordVisibility(type) {
            const passwordInput = document.getElementById(type + '-password');
            const eyeIcon = document.getElementById(type + '-password-eye');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            } else {
                passwordInput.type = 'password';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            }
        }
        
        // 切换新密码可见性
        function toggleNewPasswordVisibility() {
            const passwordInput = document.getElementById('new-password');
            const eyeIcon = document.getElementById('new-password-eye');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            } else {
                passwordInput.type = 'password';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            }
        }
        
        // 登录表单提交
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const account = document.getElementById('login-account').value.trim();
            const password = document.getElementById('login-password').value;
            const captcha = document.getElementById('login-captcha').value.trim();
            const remember = document.getElementById('remember-login').checked;
            const agreed = document.getElementById('agree-login').checked;
            
            if (!agreed) {
                CommonUtils.showToast('请先同意用户协议和隐私政策', 'warning');
                return;
            }
            
            // 基本验证
            if (!account) {
                CommonUtils.showToast('请输入账号', 'warning');
                return;
            }
            
            if (!password) {
                CommonUtils.showToast('请输入密码', 'warning');
                return;
            }
            
            if (!captcha) {
                CommonUtils.showToast('请输入验证码', 'warning');
                return;
            }
            
            // 调用登录接口
            loginWithPassword(account, password, captcha, remember);
        });
        
        // 注册表单提交
        document.getElementById('register-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const phone = document.getElementById('register-phone').value.trim();
            const password = document.getElementById('register-password').value;
            const confirmPassword = document.getElementById('register-confirm-password').value;
            const smsCode = document.getElementById('register-sms-code').value.trim();
            const agreed = document.getElementById('agree-register').checked;
            
            if (!agreed) {
                CommonUtils.showToast('请先同意用户协议和隐私政策', 'warning');
                return;
            }
            
            // 基本验证
            if (!phone) {
                CommonUtils.showToast('请输入手机号', 'warning');
                return;
            }
            
            if (!password) {
                CommonUtils.showToast('请输入密码', 'warning');
                return;
            }
            
            if (!confirmPassword) {
                CommonUtils.showToast('请确认密码', 'warning');
                return;
            }
            
            if (!smsCode) {
                CommonUtils.showToast('请输入短信验证码', 'warning');
                return;
            }
            
            // 验证手机号格式
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(phone)) {
                CommonUtils.showToast('请输入正确的手机号', 'warning');
                return;
            }
            
            // 验证密码
            if (password !== confirmPassword) {
                CommonUtils.showToast('两次输入的密码不一致', 'warning');
                return;
            }
            
            // 验证密码长度
            if (password.length < 6 || password.length > 20) {
                CommonUtils.showToast('密码长度应为6-20位', 'warning');
                return;
            }
            
            // 调用注册接口
            registerAccount(phone, password, smsCode);
        });
        
        // 发送注册短信验证码
        let registerCodeCountdown = 0;
        function sendRegisterSmsCode() {
            const phone = document.getElementById('register-phone').value.trim();
            const btn = document.getElementById('register-sms-btn');
            
            // 验证手机号格式
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(phone)) {
                CommonUtils.showToast('请输入正确的手机号', 'warning');
                return;
            }
            
            if (registerCodeCountdown > 0) {
                return;
            }
            
            // 显示加载状态
            btn.disabled = true;
            btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i>获取中...';
            btn.classList.add('opacity-70', 'cursor-not-allowed');
            
            // 调用后端接口发送验证码
            console.log('准备发送短信验证码:', { phone });
            CommonUtils.sendSmsCodeAPI(phone).then((result) => {
                console.log('短信验证码发送成功:', result);
                CommonUtils.showToast('验证码已发送', 'success');
                
                registerCodeCountdown = 60;
                btn.classList.remove('opacity-70');
                btn.classList.add('opacity-50');
                
                const timer = setInterval(() => {
                    registerCodeCountdown--;
                    btn.textContent = `${registerCodeCountdown}秒后重发`;
                    
                    if (registerCodeCountdown <= 0) {
                        clearInterval(timer);
                        btn.textContent = '获取验证码';
                        btn.disabled = false;
                        btn.classList.remove('opacity-50', 'cursor-not-allowed');
                    }
                }, 1000);
            }).catch(error => {
                console.error('短信验证码发送失败:', error);
                console.error('错误详情:', {
                    message: error.message,
                    stack: error.stack,
                    phone: phone,
                    type: 'register'
                });
                CommonUtils.showToast(error.message || '发送失败，请稍后重试', 'error');
                
                // 恢复按钮状态
                btn.textContent = '获取验证码';
                btn.disabled = false;
                btn.classList.remove('opacity-70', 'opacity-50', 'cursor-not-allowed');
            });
        }
        
        // 发送忘记密码验证码
        let forgotCodeCountdown = 0;
        function sendForgotCode() {
            const phone = document.getElementById('forgot-phone').value;
            const btn = document.getElementById('forgot-code-btn');
            
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(phone)) {
                CommonUtils.showToast('请输入正确的手机号', 'warning');
                return;
            }
            
            if (forgotCodeCountdown > 0) {
                return;
            }
            
            // 显示加载状态
            btn.disabled = true;
            btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i>获取中...';
            btn.classList.add('opacity-70', 'cursor-not-allowed');
            
            // 调用后端接口发送验证码
            CommonUtils.sendSmsCodeAPI(phone).then(() => {
                CommonUtils.showToast('验证码已发送', 'success');
                
                forgotCodeCountdown = 60;
                btn.classList.remove('opacity-70');
                btn.classList.add('opacity-50');
                
                const timer = setInterval(() => {
                    forgotCodeCountdown--;
                    btn.textContent = `${forgotCodeCountdown}秒后重发`;
                    
                    if (forgotCodeCountdown <= 0) {
                        clearInterval(timer);
                        btn.textContent = '获取验证码';
                        btn.disabled = false;
                        btn.classList.remove('opacity-50', 'cursor-not-allowed');
                    }
                }, 1000);
            }).catch(error => {
                CommonUtils.showToast(error.message || '发送失败，请稍后重试', 'error');
                
                // 恢复按钮状态
                btn.textContent = '获取验证码';
                btn.disabled = false;
                btn.classList.remove('opacity-70', 'opacity-50', 'cursor-not-allowed');
            });
        }
        
        // 忘记密码表单提交
        document.getElementById('forgot-password-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const phone = document.getElementById('forgot-phone').value;
            const code = document.getElementById('forgot-code').value;
            const newPassword = document.getElementById('new-password').value;
            const confirmPassword = document.getElementById('confirm-password').value;
            
            // 基本验证
            if (!phone) {
                CommonUtils.showToast('请输入手机号', 'warning');
                return;
            }
            
            if (!code) {
                CommonUtils.showToast('请输入验证码', 'warning');
                return;
            }
            
            if (!newPassword) {
                CommonUtils.showToast('请输入新密码', 'warning');
                return;
            }
            
            if (!confirmPassword) {
                CommonUtils.showToast('请确认新密码', 'warning');
                return;
            }
            
            if (newPassword !== confirmPassword) {
                CommonUtils.showToast('两次输入的密码不一致', 'warning');
                return;
            }
            
            if (newPassword.length < 6 || newPassword.length > 20) {
                CommonUtils.showToast('密码长度应为6-20位', 'warning');
                return;
            }
            
            // 调用重置密码接口
            resetPassword(phone, code, newPassword);
        });
        
        // 显示忘记密码弹框
        function showForgotPassword() {
            const modal = document.getElementById('forgot-password-modal');
            modal.classList.remove('hidden');
            modal.style.display = 'flex';
            
            // 预填充账号（如果是手机号格式）
            const account = document.getElementById('login-account').value;
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (phoneRegex.test(account)) {
                document.getElementById('forgot-phone').value = account;
            }
        }
        
        // 关闭忘记密码弹框
        function closeForgotPassword() {
            const modal = document.getElementById('forgot-password-modal');
            modal.style.opacity = '0';
            setTimeout(() => {
                modal.classList.add('hidden');
                modal.style.display = 'none';
                modal.style.opacity = '1';
                
                // 清空表单
                document.getElementById('forgot-password-form').reset();
            }, 300);
        }
        
        // 点击弹框外部关闭
        document.getElementById('forgot-password-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeForgotPassword();
            }
        });
        
        // ==================== API接口实现 ====================
        
        /**
         * 账号密码登录接口
         * @param {string} account - 账号（支持用户名或手机号）
         * @param {string} password - 密码
         * @param {string} captcha - 验证码
         * @param {boolean} remember - 是否记住密码
         */
        async function loginWithPassword(account, password, captcha, remember) {
            const loginBtn = document.querySelector('#login-form button[type="submit"]');
            const hideLoading = CommonUtils.showLoading(loginBtn);
            
            try {
                const loginData = {
                    username: account,
                    password: password,
                    code: captcha,
                    uuid: captchaStore.login.uuid
                };
                
                const result = await CommonUtils.loginAPI(loginData);
                
                // 保存token到全局配置
                if (result.data && result.data.access_token) {
                    CommonUtils.setAccessToken(result.data.access_token);
                }
                
                // 保存账号
                localStorage.setItem('savedAccount', account);
                
                // 如果选择记住密码，保存密码
                if (remember) {
                    localStorage.setItem('savedPassword', password);
                } else {
                    localStorage.removeItem('savedPassword');
                }
                
                // 获取用户信息
                try {
                    const userInfo = await CommonUtils.getUserInfoAPI();
                    localStorage.setItem('currentUser', JSON.stringify(userInfo.data));
                } catch (error) {
                    console.warn('获取用户信息失败:', error);
                    // 使用默认用户信息
                    const defaultUserInfo = {
                        account: account,
                        name: account.length > 10 ? '用户' + account.substring(7) : account
                    };
                    localStorage.setItem('currentUser', JSON.stringify(defaultUserInfo));
                }
                
                localStorage.setItem('isLoggedIn', 'true');
                
                CommonUtils.showToast('登录成功', 'success');
                
                // 跳转到首页
                setTimeout(() => {
                    window.location.href = '../index.html';
                }, 1500);
                
            } catch (error) {
                CommonUtils.showToast(error.message || '登录失败，请稍后重试', 'error');
                // 刷新验证码
                refreshCaptcha('login');
                document.getElementById('login-captcha').value = '';
            } finally {
                hideLoading();
            }
        }
        
        /**
         * 注册账号接口
         * @param {string} phone - 手机号
         * @param {string} password - 密码
         * @param {string} smsCode - 短信验证码
         */
        async function registerAccount(phone, password, smsCode) {
            const registerBtn = document.querySelector('#register-form button[type="submit"]');
            const hideLoading = CommonUtils.showLoading(registerBtn);
            
            try {
                const registerData = {
                    username: phone,
                    password: password,
                    code: smsCode,
                    uuid: '' // 短信验证码不需要uuid
                };
                
                console.log('注册请求数据:', registerData);
                const result = await CommonUtils.registerAPI(registerData);
                console.log('注册API响应:', result);
                
                // 检查注册是否成功（code=200）
                if (result.code === 200) {
                    CommonUtils.showToast('注册成功，已自动填充登录信息', 'success');
                    
                    // 清空注册表单数据（不记录填报数据）
                    document.getElementById('register-form').reset();
                    document.getElementById('register-sms-code').value = '';
                    
                    // 重置短信验证码按钮
                    const smsBtn = document.getElementById('register-sms-btn');
                    smsBtn.textContent = '获取验证码';
                    smsBtn.disabled = false;
                    smsBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                    registerCodeCountdown = 0;
                    
                    // 切换到登录标签并自动填充账号密码
                    setTimeout(() => {
                        switchTab('login');
                        document.getElementById('login-account').value = phone;
                        document.getElementById('login-password').value = password;
                        document.getElementById('remember-login').checked = true;
                        document.getElementById('login-password').focus();
                    }, 1500);
                } else {
                    throw new Error(result.msg || '注册失败');
                }
                
            } catch (error) {
                CommonUtils.showToast(error.message || '注册失败，请稍后重试', 'error');
                // 清空短信验证码输入框
                document.getElementById('register-sms-code').value = '';
            } finally {
                hideLoading();
            }
        }
        
        /**
         * 重置密码接口
         * @param {string} phone - 手机号
         * @param {string} code - 验证码
         * @param {string} newPassword - 新密码
         */
        async function resetPassword(phone, code, newPassword) {
            const resetBtn = document.querySelector('#forgot-password-form button[type="submit"]');
            const hideLoading = CommonUtils.showLoading(resetBtn);
            
            try {
                await CommonUtils.resetPasswordAPI(phone, code, newPassword);
                
                CommonUtils.showToast('密码修改成功，请重新登录', 'success');
                
                // 关闭弹框
                closeForgotPassword();
                
                // 切换到登录标签并填充手机号
                switchTab('login');
                document.getElementById('login-account').value = phone;
                document.getElementById('login-password').value = '';
                document.getElementById('login-password').focus();
                
            } catch (error) {
                CommonUtils.showToast(error.message || '修改失败，请稍后重试', 'error');
            } finally {
                hideLoading();
            }
        }
        
    </script>
</body>
</html>

